import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    height: 380
    visible: true
    width: 640

    Rectangle {
        id: root

        property int duration: 3000

        anchors.fill: parent

        Rectangle {
            id: sky

            height: 200
            width: parent.width

            gradient: Gradient {
                GradientStop {
                    color: '#0080FF'
                    position: 0.0
                }
                GradientStop {
                    color: '#66CCFF'
                    position: 1.0
                }
            }
        }
        Rectangle {
            id: ground

            anchors.bottom: root.bottom
            anchors.top: sky.bottom
            width: parent.width

            gradient: Gradient {
                GradientStop {
                    color: '#00FF00'
                    position: 0.0
                }
                GradientStop {
                    color: '#00FF00'
                    position: 1.0
                }
            }
        }
        Image {
            id: ball

            height: 50
            source: '/resources/img/soccer_ball.png'
            width: 50
            x: 20
            y: 240

            MouseArea {
                id: area

                anchors.fill: parent

                onClicked: {
                    ball.x = 20;
                    ball.y = 240;
                    anim.restart();
                }
            }
        }
        ParallelAnimation {
            id: anim

            SequentialAnimation {
                NumberAnimation {
                    duration: root.duration * 0.4
                    properties: 'y'
                    target: ball
	                easing.type: Easing.OutCirc
                    to: 20
                }
                NumberAnimation {
                    duration: root.duration * 0.6

                    easing.type: Easing.OutBounce
                    properties: 'y'
                    target: ball
                    to: 240
                }
            }
            NumberAnimation {
                duration: root.duration
                properties: 'x'
                target: ball
                to: 400
            }
            RotationAnimation {
                duration: root.duration * 1.1
                properties: 'rotation'
                target: ball
                to: 1080
            }
        }
    }
}